<template>
    <div class="container">
        <!-- <p>{{userInfo.openId}}</p> -->
        <div class="userInfo">
            <img :src="userInfo.avatarUrl" />
            <p>{{userInfo.nickName}}</p>
        </div> 
        <YearProgress></YearProgress>
        <button class="btn" @click="scanBook" v-if="userInfo.openId">扫码录入图书</button>
        <!-- <open-data type="userAvatarUrl"></open-data>
        <open-data type="userNickName" lang="zh_CN"></open-data> -->
        <!-- <button open-type="getUserInfo" class="btn">登录</button>  -->

        <button open-type="getUserInfo" class="btn" v-if="!userInfo.openId" lang="zh_CN" @click="doLogin">点击登录</button>
    </div>
</template>

<script>
import qcloud from 'wafer2-client-sdk'
import YearProgress from '@/components/YearProgress'
import {post, showSuccess, showModal} from '../../util'
import config from '../../config'
export default {
  data () {
    return {
      userInfo: {
        avatarUrl: '../../../static/img/unlogin.png',
        nickName: '昵称'
      }

    }
  },
  components: {
    YearProgress
  },
  methods: {
    async addBook (isbn) {
        const res = await post('/weapp/addBook',{
            isbn,
            openid: this.userInfo.openId
        })
        if(res.title){
            showModal('添加成功',`${res.title}添加成功`)
        }
    },
    scanBook () {
      wx.scanCode({
        success: (res) => {
          console.log(res)
          if(res.result){
              this.addBook(res.result)
          }
        }
      })
    },
    login () {
      // 从本地存储获取用户信息
      let user = wx.getStorageSync('userInfo')
      const self = this
      // 判断是否登录
      if (!user) {
        // 设置登录地址
        qcloud.setLoginUrl(config.loginUrl)
        qcloud.login({
          success: function (userInfo) {
            console.log('登录成功', userInfo)
            qcloud.request({
              url: config.userUrl,
              login: true,
              success (userRes) {
                showSuccess('登录成功')
                // console.log(userRes)
                // 把用户登陆信息存储到本地
                wx.setStorageSync('userInfo', userRes.data.data)
                self.userInfo = userRes.data.data
              }
            })
          },
          fail: function (err) {
            console.log('登录失败', err)
          }
        })
      }
    },
    doLogin: function () {
      const session = qcloud.Session.get()
      qcloud.setLoginUrl(config.loginUrl)

      if (session) {
        // 第二次登录
        // 或者本地已经有登录态
        // 可使用本函数更新登录态
        qcloud.loginWithCode({
          success: res => {
            // this.setData({ userInfo: res, logged: true })
            // showSuccess('已经登录了')
            console.log('第N次登录', res)
            wx.setStorageSync('userInfo', res)
            this.userInfo = res
          },
          fail: err => {
            console.error(err)
            console('登录错误', err.message)
          }
        })
      } else {
        // 首次登录
        qcloud.login({
          success: res => {
            // this.setData({ userInfo: res, logged: true })
            showSuccess('登录成功')
            console.log('第1次登录', res)
            wx.setStorageSync('userInfo', res)
            this.userInfo = res
          },
          fail: err => {
            console.error(err)
          }
        })
      }
    }
  },
  // created(){
  //     this.userInfo = wx.getStorageSync('userInfo')
  // }
  created () {
    this.doLogin()
    let user = wx.getStorageSync('userInfo')
    if (user.nickName) {
      this.userInfo = user
    }
    // const that = this
    // wx.getSetting({

    //     success: function(res){
    //         if (res.authSetting['scope.userInfo']) {
    //         // 已经授权，可以直接调用 getUserInfo 获取头像昵称
    //         wx.getUserInfo({
    //             success: function(res) {
    //                 wx.setStorageSync('userInfo',JSON.parse(res.rawData))
    //                 console.log('授权成功，获取信息', JSON.parse(res.rawData))
    //                 let user = wx.getStorageSync('userInfo')
    //                 that.userInfo = userInfo
    //                 console.log('that.userInfo', that.userInfo)
    //             }
    //         })
    //         }
    //     }
    // })
  }
}
</script>

<style lang="scss">
    .container{
        padding: 0 30rpx;
        .userInfo{
            margin-top: 100rpx;
            text-align: center;
            margin-bottom: 10px;
            padding: 0 200rpx;
            img{
                width: 150rpx;
                height: 150rpx;
                border-radius: 50%;
                margin-bottom: 20rpx;
            }
        }
    }
</style>
